<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<!-- <image src="/static/icon/left.png" mode="aspectFill"></image> -->
				<u-icon name="arrow-left" color="#020121" size="34"></u-icon>
			</view>
			<view class="r-name">更多类型</view>
		</view>
	</Nav>
	<view :style="{marginTop: navHeiht+ 'px'}">
		<view class="content">
			<view class="dispaly-just-between">
				<view class="left f-1">
					<scroll-view scroll-y="true" class="scroll-Y" :style="{ height: newsPanelHeight + 'px' }">
						<view :class="{'ac': current == index}" @click="selectOneCate(item, index)"
							class="one-cate-item  over-1" v-for="(item, index) in oneCateList" :key="item.id">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
				<view class="right f-4">
					<scroll-view scroll-y="true" class="scroll-Y2" :style="{ height: newsPanelHeight + 'px' }">
						<view class="con-box">
							<view class="title">西装</view>
							<view class="type-list">
								<view class="type-item dispaly-col-center"
									@click="$goUrl(`/subPackage/index/catePage?title=${index}`)"
									v-for="(item, index) in 10" :key="index">
									<view class="cover">
										<image
											src="https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6"
											mode="aspectFill"></image>
									</view>
									<view class="name over-1">欧版西装</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getElementHeight,
		getScreenSHeight
	} from '@/utils/util'

	const oneCateList = ref([{
		name: '西装',
		id: 1
	}])

	// 选择一级分类
	const current = ref(0)
	const selectOneCate = (item, index) => {
		current.value = index
	}

	// 获取元素高度
	// 获取屏幕剩余高度
	const newsPanelHeight = ref(0)
	const navHeiht = ref(0)
	onMounted(async () => {
		for (var i = 0; i < 30; i++) {
			oneCateList.value.push({
				name: `西装${i}`,
				id: i
			})
		}
		const res = await getElementHeight('.f')
		navHeiht.value = res
		newsPanelHeight.value = await getScreenSHeight(navHeiht.value)
	})
</script>

<style lang="scss" scoped>
	.ac {
		background-color: #fff;
		font-weight: 900 !important;
		font-size: 32rpx !important;
		color: #020121 !important;
	}

	.home-content {
		margin: 0 32rpx;
	}

	.t-r {
		border-top-right-radius: 50rpx;
	}

	.b-r {
		border-bottom-right-radius: 50rpx;
	}

	.r-name {
		color: #020121;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.content {
		.left {
			.scroll-Y {
				display: flex;
				flex-direction: column;
				justify-content: center;
				background-color: #f3f5f7;

				.one-cate-item {
					padding: 32rpx 0;
					width: 210rpx;
					max-width: 210rpx;
					text-align: center;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 32rpx;
					color: #020121;
				}
			}
		}

		.right {
			margin-left: 24rpx;

			.con-box {
				.title {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #7B7B89;
					margin: 32rpx 0 16rpx 0;
				}

				.type-list {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.type-item {
						margin: 8rpx;
						width: 148rpx;
						height: 148rpx;
						background: #F3F5F7;
						border-radius: 20rpx;

						.cover {
							image {
								width: 72rpx;
								height: 72rpx;
							}
						}

						.name {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 400;
							font-size: 28rpx;
							color: #020121;
						}
					}
				}
			}
		}
	}
</style>

<style>
	page {
		background-color: #fff;
	}
</style>